package com.lzgcoding.onlineshopapp.feature.detail

import androidx.compose.animation.AnimatedContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ListItem
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.lzgcoding.onlineshopapp.feature.detail.component.ColorsAndSizeList
import com.lzgcoding.onlineshopapp.feature.detail.component.DetailBottomBar
import com.lzgcoding.onlineshopapp.feature.detail.component.DetailTopBar
import com.lzgcoding.onlineshopapp.feature.detail.component.ProductImages
import com.lzgcoding.onlineshopapp.nav.AppRoute
import com.lzgcoding.onlineshopapp.ui.theme.LargePadding
import com.lzgcoding.onlineshopapp.ui.theme.MediumPadding
import com.lzgcoding.onlineshopapp.ui.theme.OnlineShopAppTheme
import org.koin.androidx.compose.koinViewModel
import org.koin.core.parameter.parametersOf

@Composable
fun DetailScreen(
    params: AppRoute.Detail,
    upPress: () -> Unit
) {
    val viewModel = koinViewModel<DetailViewModel>(){
        parametersOf(params.id)
    }
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    AnimatedContent(
        modifier = Modifier.fillMaxSize(),
        targetState = uiState.product == null
    ) { target ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.background)
        ) {
            if (target) {
                CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
            } else {
                val product = uiState.product!!
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .verticalScroll(rememberScrollState())
                ) {
                    ProductImages(
                        modifier = Modifier
                            .height(360.dp)
                            .fillMaxWidth()
                            .background(Color(0xFFf4f3f8))
                            .statusBarsPadding(),
                        images = product.picUrls,
                        selectedImageIndex = uiState.selectedImageIndex,
                        onSelectedImageChange = viewModel::onImageChange,
                    )
                    ListItem(
                        headlineContent = {
                            Text(
                                text = product.title,
                                style = MaterialTheme.typography.titleLarge,
                                fontWeight = FontWeight.Bold,
                            )
                        }
                    )
                    ColorsAndSizeList(
                        colors = product.colors,
                        sizes = product.sizes,
                        selectedColor = uiState.selectedColor ?: "#000000",
                        selectedSize = uiState.selectedSize ?: "",
                        onSizeChange = viewModel::onSizeChange,
                        onColorChange = viewModel::onColorChange
                    )
                    Spacer(Modifier.height(LargePadding))
                    ListItem(
                        overlineContent = {
                            Text(
                                text = "Product Detail",
                                style = MaterialTheme.typography.bodyLarge,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.padding(bottom = MediumPadding)
                            )
                        },
                        headlineContent = {
                            Text(
                                text = product.description,
                                style = MaterialTheme.typography.bodyMedium,
                                color = Color(0xFFbcbcbc)
                            )
                        }
                    )
                }
                DetailBottomBar(price = product.price, oldPrice = product.oldPrice)
            }
            DetailTopBar(upPress = upPress)
        }

    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
private fun DetailScreenPreview() {
    OnlineShopAppTheme {
        DetailScreen(params = AppRoute.Detail(0)) {}
    }
}